<template>
  <div><div class="abstatic-height"></div>
    <div class="identify-container">
        <el-container>
            <el-header style="line-height:60px;border-bottom:solid 1px rgba(80,277,194,.3);">
                <span style="color:#50E3C2;font-size:16px;cursor: pointer" @click="backTo"><i class="el-icon-arrow-left"></i>烟雾、火烟识别</span>
                <div class="allDevice">
                    全部设备
                </div>
            </el-header>
            <el-container>
                <el-main>
                    <el-row >
                        <!-- :class="{'active':index%2 != 0 && deviceGroup.length >= 6}" -->
                        <el-col class="card" :span="8" v-for="(item,index) in deviceGroup"  :key="index" :class="{'inactive':index>=3}">
                            <div  class="elCard" ref="devicetail" >
                                <video  style="width:100%" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" :id="forId(index)"  poster=""  controls webkit-playsinline autoplay>
                                    <source v-if="item.liveAddress&&item.liveAddress.rtmp" :src="item.liveAddress.rtmp" />
                                </video>
                                <div class="containerbox" style="min-height:63px;">
                                    <div class="device-name">
                                        <span :title="item.deviceName">{{item.deviceName}}</span>
                                    </div>
                                    <div class="dev-status" v-bind="{class:'alerm'+item1.status}" v-for="(item1,index1) in item.alarmMsg" :key="index1" style="min-height:20px;">
                                        <span>{{item1.title}}:</span>
                                        <span>{{item1.value}}</span>
                                    </div>
                                </div>
                                <div class="device-config" v-if="item.hasSolution==0">
                                     <i class="el-icon-setting"></i>
                                     <span @click="deploydev(item.id)">配置</span>
                                </div>
                                <div class="device-config1"  v-if="item.hasSolution==1">
                                    <div class="left">
                                        <i class="el-icon-circle-check-outline"></i>
                                        <span>已配置</span>
                                    </div>
                                    <div class="right" style="cursor:pointer;" @click="cancelDevice(item.id)">
                                        <i class="el-icon-delete"></i>
                                        <span>取消</span>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row  >
                        <!-- :class="{'active':indexv%2 != 1 }" -->
                        <el-col  id="card" :span="8" v-for="(itemv,indexv) in deviceGroup"  :key="indexv" :class="{'inactive':indexv<3}">
                            <div  class="elCard" ref="devicetail" >
                                <video style="width:100%" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" :id="forIdv(indexv)"  poster=""  controls webkit-playsinline autoplay>
                                      <source v-if="itemv.liveAddress&&itemv.liveAddress.rtmp" :src="itemv.liveAddress.rtmp" />
                                </video>
                                <div class="containerbox" style="min-height:63px;">
                                    <div class="device-name">
                                        <span :title="itemv.deviceName">{{itemv.deviceName}}</span>
                                    </div>
                                    <div class="dev-status" v-bind="{class:'alerm'+item1.status}" v-for="(item1,index1) in itemv.alarmMsg" :key="index1" style="min-height:20px;">
                                        <span>{{item1.title}}:</span>
                                        <span>{{item1.value}}</span>
                                    </div>
                                </div>
                                <div class="device-config" v-if="itemv.hasSolution==0">
                                     <i class="el-icon-setting"></i>
                                     <span @click="deploydev(itemv.id)">配置</span>
                                </div>
                                <div class="device-config1"  v-if="itemv.hasSolution==1">
                                    <div class="left">
                                        <i class="el-icon-circle-check-outline"></i>
                                        <span>已配置</span>
                                    </div>
                                    <div class="right" style="cursor:pointer;" @click="cancelDevice(itemv.id)">
                                        <i class="el-icon-delete"></i>
                                        <span>取消</span>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                     <div class="pagination-container">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="page"
                        :page-sizes="[6,9,12,15]"
                        :page-size="limit"
                        layout="prev, pager, next, jumper ,total"
                        :total="total">
                    </el-pagination>
                </div>
                </el-main>
                <el-aside width="286px" style="font-size:14px;padding-right: 10px;">
                    <div class="top-handle-tab" style="margin: 10px 0">
                      <el-radio-group v-model="radioType" @change="switchTable">
                        <el-radio-button label="all">全部</el-radio-button>
                        <el-radio-button label="already">已配置</el-radio-button>
                      </el-radio-group>
                      <div class="line-with-verticl"></div>
                    </div>
                    <div class="all-content">
                      <el-scrollbar style="height:100%">
                        <div class="top" @click="viewAllGroup">
                            全部设备组
                        </div>
                        <div class="content">
                            <div class="device-list" v-for="(item,index) in deviceAll" :key="index">
                                <i class="tName"></i>
                                <span @click="viewPerdev(item.id)" :title="item.deviceGroupName">{{item.deviceGroupName}}</span>
                            </div>
                        </div>
                      </el-scrollbar>
                    </div>
                </el-aside>

            </el-container>

        </el-container>
    </div>
    </div>
</template>
<script>
// import '@/assets/ezuikit';
import {
    checkDev,
    page,
    configSolution
} from "@/api/device/videoAnalyze/index"
export default {
    data(){
        return {
            picAdd:"",
            deviceAll:["假山", "鱼缸"],
            radioType:"all",
            page:1,
            limit:6,
            total:null,
            liveGroup:[],
            deviceGroupshow:[],
            deviceGroup:[],
            solutionId:"",
            groupId:""
        }
    },
    mounted(){
       this.initLoad();

    },
    computed:{
        rowNum(){
            return this.rowNum = parseInt(this.limit/3)
        }
    },
    watch:{

    },
    methods:{
        getParams(){
            this.solutionId = this.$route.query.plan;
        },
        cancelDevice(id){
            // 取消配置
            let canshu = this.$qs.stringify({
                deviceId:id
            })
            configSolution(canshu).then(res => {
                if(res.status===200){
                    this.$notify({
                        title: "成功",
                        message: "处理成功",
                        type: "success",
                        duration: 2000
                    });
                    this.deviceGroup = [];
                    page({page:this.page,limit:this.limit}).then(res => {
                        this.deviceGroup = res.data.rows;
                        this.total = res.data.total;
                        this.radioType='all';
                    }).catch(res=>{
                        this.$notify({
                        title: "提示",
                        message: "网络异常！",
                        type: "warning",
                        duration: 2000
                    });
                })
                }else{
                    this.$notify({
                        title: "失败",
                        message: res.message,
                        type: "warning",
                        duration: 2000
                    });
                }
            })

        },
        deploydev(id){
            this. getParams();
            let canshu = this.$qs.stringify({
                solutionId:this.solutionId,
                deviceId:id
            })
            configSolution(canshu).then(res => {
                if(res.status===200){
                    this.$notify({
                        title: "成功",
                        message: "处理成功",
                        type: "success",
                        duration: 2000
                    });
                     this.deviceGroup = [];
                    page({page:this.page,limit:this.limit}).then(res => {
                        this.deviceGroup = res.data.rows;
                        this.total = res.data.total;
                    }).catch(res=>{
                        this.$notify({
                        title: "提示",
                        message: "网络异常！",
                        type: "warning",
                        duration: 2000
                    });
            })
                }else{
                    this.$notify({
                        title: "失败",
                        message: res.message,
                        type: "warning",
                        duration: 2000
                    });
                }
            })
        },
        switchTable() {
            if(this.radioType == "all"){
                  setTimeout(()=>{
                    this.viewAll()
                },1000)
            }else{
                this.deviceGroup = [];
                page({hasSolution:1,page:this.page,limit:this.limit}).then(res => {
                    this.deviceGroup = res.data.rows;
                    this.total = res.data.total;
                }).catch(res=>{
                this.$notify({
                title: "提示",
                message: "网络异常！",
                type: "warning",
                duration: 2000
                });
            })
            }
        },
        forId(index){
            // let that = this;
            this.$nextTick(function(){
                  setTimeout(()=>{
                    this.getVideo(index)
                },1000)
            })
            return "myPlayer_"+index;
        },
        forIdv(indexv){
            //   let that = this;
            this.$nextTick(function(){
                  setTimeout(()=>{
                    this.getVideov(indexv)
                },1000)
            })
            return "myPlayer1_"+indexv;
        },
        viewAllGroup(){
            this.groupId = '';
            this.viewAll();
        },
        viewAll(){
            this.deviceGroup =[];
            page({groupId:this.groupId,page:this.page,limit:this.limit}).then(res => {
                this.deviceGroup = res.data.rows;
                this.total = res.data.total;
           }).catch(res=>{
                this.$notify({
                title: "提示",
                message: "网络异常！",
                type: "warning",
                duration: 2000
                });
            })
        },
        viewPerdev(groupId){
            this.deviceGroup = [];
            this.groupId = groupId;
           page({groupId:groupId,page:this.page,limit:this.limit}).then(res => {
                this.deviceGroup = res.data.rows;
                this.total = res.data.total;
           }).catch(res=>{
                this.$notify({
                title: "提示",
                message: "网络异常！",
                type: "warning",
                duration: 2000
                });
            })
        },
        getVideo(index){
            let player = new EZUIPlayer('myPlayer_'+index);
        },
        getVideov(indexv){
            let player = new EZUIPlayer('myPlayer1_'+indexv);
        },
        initLoad(){
            checkDev().then(res => {

                this.deviceAll = res;
            }).catch(res=>{
                this.$notify({
                title: "提示",
                message: "网络异常！",
                type: "warning",
                duration: 2000
                });
            })

            this.viewAll();
        },
        handleSizeChange(val){
            this.deviceGroup = [];
            this.limit = val;
            this.viewAll();
        },
        handleCurrentChange(val){
            this.deviceGroup = [];
            this.page = val;
            this.viewAll();
        },
        backTo(){
           this.$router.go(-1)
        }
    }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.identify-container{
    .allDevice{
        display: inline-block;
        margin-left: 30%;
        color:rgba(255,255,255,.7);
        font-weight: 600;
    }
    #card.inactive,.card.inactive{
        display: none !important;
    }
    .elCard{
        text-align:center;
        padding: 20px;
        font-size:14px;
        background: #0A1722;
        border-radius: 3px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
    .all-content {
      height: calc(100vh - 200px);
      .top{
        cursor: pointer;
        height: 26px;
        line-height: 26px;
        font-size: 14px;
        color: #fff;
        padding-left: 10px;
      }
      .el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
    .content{
        color:rgba(255,255,255,.7);
        padding-left:10px;
        .device-list{
            line-height: 40px;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding:0 8px;
            cursor: pointer;
            .tName {
                width: 6px;
                height: 6px;
                display: inline-block;
                margin-right: 5px;
                background-color: #08ff68;
                border-radius: 100%;
                display: none;
            }
            span{
                flex:9;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
    .device-name{
        text-align: center;
        font-weight: 600;
        color: #fff;
        line-height: 30px;
        font-size: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .dev-status{
        padding: 5px;
        color: #fff;
        font-size: 12px;
        display: inline-block;
        border-radius: 3px;
        margin-bottom: 10px;
    }
    .dev-status.alerm1{
        background-color: #FF3B30 !important;
    }
    .dev-status.alerm0{
       background-color: #FFAF40 !important;
    }
    .dev-status.alerm2{
        background-color: #1ABC9C !important;
    }
    .device-config{
        height: 30px;
        line-height: 50px;
        border-top: 1px solid rgba(80,277,194,.3);;
        text-align: center;
        color: rgba(255,255,255,.7);
       cursor: pointer;
    }
    .device-config1{
        height: 30px;
        padding-top: 16px;
      color: rgba(255,255,255,.7);
        border-top: 1px solid rgba(80,277,194,.3);
        display: flex;
        align-items: center;
        .left,.right{
            flex: 1;
            display: inline-block;
        }
    }

}
</style>


